<#import "/spring.ftl" as spring />
<#assign htmlEscape = true in spring>

<!DOCTYPE html>
<html>
	<head>
		<title><@spring.message 'application.name' /></title>
		<link rel="stylesheet" type="text/css" href="<@spring.url '/resources/css/third-party/jquery-ui/smoothness/jquery-ui-1.10.3.custom.css'/>" />
		<link rel="stylesheet" type="text/css" href="<@spring.url '/resources/css/common.css'/>" />
	</head>
	<body>
		<div class="main">
			<div id="columnLeft">
				
				<#if queryExecutionTime?has_content>
					<h3>Query Execution Time : <span style="color:red">${queryExecutionTime} ms</span></h3>
				</#if>
				
				<ul class="utilities">
					<li class="fund-dropdown">
						<h3>Add funds to chart</h3>
						<select>
							<option value>Select a fund...</option>
							<#if portfolioStaticDataMap?has_content>
								<#list portfolioStaticDataMap?keys as key>
									<#assign staticData = portfolioStaticDataMap[key] />
									<#if staticData['isin'] != isin>
										<option data-fundname="${staticData['fundName']}" data-ticker="${staticData['ticker']}" value="${staticData['isin']}">${staticData["ticker"]} ${staticData["fundName"]}</option>
									</#if>	
								</#list>							
							</#if>
						</select>
					</li>
					<li class="data-types">
						<h3>Choose datapoints</h3>
						<table>
							<thead>
								<tr>
									<th class="fund">Fund</th>
									<th class="fund-return"><a href="#" title="Fund Return">FR</a></th>
									<th class="bm-return"><a href="#" title="Benchmark Return">BR</a></th>
									<th class="nav">NAV</th>
									<th class="remove">&nbsp;</th>
								</tr>
							</thead>
							<tbody>
								<tr data-isin="${staticData["isin"]}" data-ticker="${staticData["ticker"]}">
									<#assign staticData = portfolioStaticDataMap[isin] />
									<td class="fund">${staticData["fundName"]}</td>
									<td class="fund-return" style="background: #2f7ed8;"><input type="checkbox" value="fundReturn" checked /></td>
									<td class="bm-return"><input type="checkbox" value="benchReturn" /></td>
									<td class="nav"><input type="checkbox" value="NAV" /></td>
									<td class="remove"><a href="#">X</a></td>
								</tr>
							</tbody>
						</table>
					</li>
				</ul>
				<h3>Ajax query timings</h3>
				<ul id="ajaxTimeLog"></ul>
			</div>
			<div id="columnRight">
				<div id="comparisonChartContainer">&nbsp;</div>
			</div>
			<div class="clear">&nbsp;</div>
		</div>
		
		<script type="text/javascript" src="<@spring.url '/resources/javascript/third-party/jquery-1.10.2.min.js' />"></script>
		<script type="text/javascript" src="<@spring.url '/resources/javascript/third-party/highstock.js' />"></script>
		<script type="text/javascript" src="<@spring.url '/resources/javascript/third-party/jquery-ui/jquery-ui-1.10.3.custom.min.js' />"></script>
		<script type="text/javascript" src="<@spring.url '/resources/javascript/comparison-chart.js' />"></script>
		<script type="text/javascript" src="<@spring.url '/resources/javascript/combobox.js' />"></script>
		<script type="text/javascript">
			if (typeof CC === "undefined" || !CC) {
				var CC = {};
			}
			
			<#if timeSeriesData?has_content>
				<#assign staticData = portfolioStaticDataMap[isin] />
				
				CC.comparisonTool.series.push({
					isin: '${isin}',
					name: '${staticData["ticker"]} - Fund Return',
					data: [
						<#list timeSeriesData?keys as key >
							<#assign tsData = timeSeriesData[key]>
							[${key}, ${tsData["fundReturn"]}]<#if key_has_next>,</#if>
						</#list>
					],
					dataType: 'fundReturn'
				});
				
				CC.comparisonTool.series.push({
					name: 'Navigator'
				});
			</#if>
			
			<#-- Specify alternate Navigator series here -->
			<#--
			CC.comparisonTool.separateNavigator.data = [];
			-->
		</script>
	</body>
</html>